<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>СИМ</title>
</head>

<body>
    <header class="header" id="home">
        <nav>
            <div class="nav__bar">
                <div class="logo nav__logo">
                    <!-- <img src="/assets/Moscow_Transport_logo1.png" alt="" width="20px" height="100px"> -->
                    <a href="#">Московский Транспорт</a>
                </div>
                <ul class="nav__links" id="nav-links">
                    <li><a href="#about" style="white-space: nowrap;">О СИМ</a></li>
                    <li><a href="#howtodo" style="white-space: nowrap;">Как вопспользоваться?</a></li>
                    <li><a href="#now" style="white-space: nowrap;">Начало поездки</a></li>
                    <li><a href="#safe">Безопасность</a></li>
                    <li><a href="#faq">Вопросы</a></li>
                    <li><a href="#contact">Контакты</a></li>
                </ul>
                <div class="nav__menu__btn" id="menu-btn">
                    <i class="ri-menu-line"></i>
                </div>
                <div class="nav__action__btn">
                    <!-- <button class="btn">
              <span><i class="ri-user-line"></i></span> Account
            </button> -->
                </div>
            </div>
        </nav>
        <div class="section__container header__container">
            <div class="header__content">
                <h3 class="section__subheader">Функционал СИМов</h3>
                <h2 class="section__header">
                    Средства индивидуальной мобильности
                </h2>
                <div class="scroll__btn">
                    <a href="#about">
                        Скачать приложение
                        <span><i class="ri-arrow-down-line"></i></span>
                    </a>
                </div>
            </div>
            <div class="header__socials">
                <span>Подпишись!</span>
                <a href="#"><i class="ri-vk-line"></i></a>
                <a href="#"><i class="ri-tiktok-fill"></i></a>
            </div>
        </div>
    </header>
    <section class="about">
        <div class="section__container about__container">
            <div class="about__image about__image-1">
                <img src="assets/about-1.jpg" alt="about" />
            </div>
            <div class="about__content about__content-1">
                <h3 class="section__subheader" id="about">СИМ</h3>
                <h2 class="section__header">О НАС</h2>
                <p>Добро пожаловать в увлекательный мир СИМ - самокатов и электровелосипедов в приложении Московский Транспорт!</p>
                <p>Давайте сделаем ваше путешествие по городу еще более захватывающим и комфортным!</p>
                <p>У нас вы найдете все необходимое: от описания и инструкций до советов по безопасности и аренде.</p>
                <!-- <div class="about__btn">
            <a href="#">
              Кнопка
              <span><i class="ri-arrow-right-line"></i></span>
            </a>
          </div> -->
            </div>
            <div class="about__image about__image-2">
                <img src="assets/about-2.jpg" alt="about" />
            </div>
            <div class="about__content about__content-2">
                <h3 class="section__subheader" id="info">Быстро и Удобно</h3>
                <h2 class="section__header">Удобный городской транспорт</h2>
                <p>Используйте СИМы через приложение Московский Транспорт, чтобы с комфортом и без лишних хлопот добираться до нужного места.</p>
                <p>Наши разделы помогут вам освоиться с функционалом СИМов, выбрать и арендовать их, а также узнать правила безопасности и ответы на часто задаваемые вопросы.</p>
                <p>Не теряйте время на поиски транспорта - с СИМами ваше путешествие станет увлекательным и беззаботным!</p>
                <!-- <div class="about__btn">
            <a href="#">
           кнопка
              <span><i class="ri-arrow-right-line"></i></span>
            </a>
          </div> -->
            </div>
            <div class="about__image about__image-3">
                <img src="assets/about-3.jpg" alt="about" />
            </div>
            <div class="about__content about__content-3">
                <h3 class="section__subheader" id="howtodo">Пользование СИМ</h3>
                <h2 class="section__header">Как воспользоваться?</h2>
                <p>1. Для поездки на СИМ зарегистрируйтесь в приложении оператора и привяжите банковскую карту.</p>
                <p>2. Свободно перемещайтесь в рамках зоны действия, обязательно соблюдайте правила дорожного движения.</p>
                <p>3. Через приложение найдите самокат на карте и начните аренду отсканировав QR-код на руле и отстегнув замок.</p>
                <p>4. Чтобы завершить поездку, припаркуйтесь на ближайшей парковке, пристегнув СИМ гибким замком и завершив аренду в приложении оператора.</p>
            </div>
            <!-- Правильная поездка -->
            <div class="about__image about__image-4">
                <img src="assets/about-4.jpg" alt="about" />
            </div>
            <div class="about__content about__content-4">
                <h3 class="section__subheader" id="now">Начало поездки</h3>
                <h2 class="section__header">Начинайте поездку на СИМ правильно!</h2>
                <p>Поставьте одну ногу ближе к рулю, а вторую чуть позади. Эта позиция устойчивее других.</p>
                <p>Держитесь за руль двумя руками. Так будет проще сохранить равновесие и быстро затормозить — у самоката есть тормоза на обеих ручках.</p>
                <p>Стартуйте, оттолкнувшись ногой. Встаньте на самокат, возьмитесь за руль и оттолкнитесь — самокат поедет, и вы спокойно наберете скорость.</p>
                <p>Старайтесь не тормозить в последний момент. Лучше делать это заранее, чтобы без проблем остановиться и не врезаться.</p>
                <p>Используйте фонарь. Он работает автоматически при включении СИМ.</p>
                <!-- <div class="about__btn">
    <a href="#">
      кнопка
      <span><i class="ri-arrow-right-line"></i></span>
    </a>
  </div> -->
            </div>
            <!-- Правильная поездка -->
            <!-- Безопасность -->
            <div class="about__image about__image-5">
                <img src="assets/about-5.jpg" alt="about" />
            </div>
            <div class="about__content about__content-5">
                <h3 class="section__subheader" id="safe">Безопасность</h3>
                <h2 class="section__header">Рекомендуем использовать шлем и светоотражающие элементы во время поездок на электросамокатах</h2>
                <p>Это повышает вашу безопасность и обеспечивает видимость в темное и ночное время.</p>
                <!-- <div class="about__btn">
    <a href="#">
   Кнопка
      <span><i class="ri-arrow-right-line"></i></span>
    </a>
  </div> -->
            </div>
        </div>
        <!-- Безопасность -->
        <!-- FAQ -->
        <section id="faq">
            <!-- Heading -->
            <div class="faq-heading" id="question">
                <h3>Часто задаваемые вопросы:</h3>
            </div>
            <!-- Container -->
            <div class="faq-content">
                <div class="faq-box-container">
                    <div class="faq-box">
                        <div class="faq-box-question active">
                            <h4>Как арендовать СИМ через приложение?</h4>
                            <span class="faq-box-icon"></span>
                        </div>
                        <div class="faq-box-answer" style="max-height: 100px;">
                            <p>Для аренды СИМ просто откройте приложение Московский Транспорт, выберите ближайшее устройство на карте
                                и нажмите 'Арендовать'.</p>
                        </div>
                    </div>
                    <div class="faq-box">
                        <div class="faq-box-question">
                            <h4>Как обеспечивается безопасность при использовании?</h4>
                            <span class="faq-box-icon"></span>
                        </div>
                        <div class="faq-box-answer">
                            <p>Мы регулярно проверяем состояние устройств, а также предоставляем рекомендации по безопасному использованию.</p>
                        </div>
                    </div>
                    <div class="faq-box">
                        <div class="faq-box-question">
                            <h4>Что делать в случае проблем с СИМ?</h4>
                            <span class="faq-box-icon"></span>
                        </div>
                        <div class="faq-box-answer">
                            <p>Если у вас возникли проблемы с устройством, обратитесь в службу поддержки через приложение или по телефону.</p>
                        </div>
                    </div>
                    <div class="faq-box">
                        <div class="faq-box-question">
                            <h4>Могу ли я арендовать несколько устройств одновременно?</h4>
                            <span class="faq-box-icon"></span>
                        </div>
                        <div class="faq-box-answer">
                            <p>Да, вы можете арендовать несколько СИМ для совместной поездки с друзьями или семьей.</p>
                        </div>
                    </div>
                    <div class="faq-box">
                        <div class="faq-box-question">
                            <h4>Какие возможности предоставляет приложение?</h4>
                            <span class="faq-box-icon"></span>
                        </div>
                        <div class="faq-box-answer">
                            <p>Приложение позволяет не только арендовать СИМ, но и планировать маршруты, оплачивать поездки
                                и следить за балансом на счете.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--FAQ -->
        <!-- FOOTER -->
        <footer class="footer" id="contact">
            <div class="section__container footer__container">
                <div class="footer__col">
                    <div class="logo footer__logo">
                        <a href="#">Московский Транспорт</a>
                    </div>
                    <p>
                        Откройте для себя новый уровень мобильности!
                    </p></br>
                    <p>Контакт-центр «Московский транспорт»</p>
                    <p><a class="a_black2" href="tel:+74955395454" style="color: white;">+7 495 539-54-54</a></p></br>
                    <p></p>
                </div>
                <div class="footer__col">
                    <!-- <h4>Заголовок</h4> -->
                    <ul class="footer__links">
                        <li><a href="#">О СИМ</a></li>
                        <li><a href="#">Контакты</a></li>
                        <li><a href="#">Написать нам</a></li>
                        <li><a href="#">Политика Компании</a></li>
                    </ul>
                </div>
                <!-- <div class="footer__col">
          <h4>Ещё колонка</h4>
          <ul class="footer__links">
            <li><a href="#">???</a></li>
            <li><a href="#">???</a></li>
            <li><a href="#">???</a></li>
          </ul>
        </div> -->
            </div>
            <div class="footer__bar">
                © 2024 Московский Транспорт. Все права защищены.
            </div>
        </footer>
        <!-- FOOTER -->
        <script src="https://unpkg.com/scrollreveal"></script>
        <script src="main.js"></script>
</body>

</html>